<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset='utf8'>
	<title>Leaflet.RepeatedMarkers demo</title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
  crossorigin=""/>
<!--<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js"
  crossorigin=""></script>-->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
  integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
  crossorigin=""></script>

	<script type="text/javascript" src="Leaflet.RepeatedMarkers.js"></script>
	<style>
	#map {
/*    margin: 32px; */
/*    width: auto; */
/*    overflow: visible; */
		width: calc( 100vw - 64px );
		height: calc( 100vh - 64px );
	}
	body { margin: 0 }

	</style>
</head>
<body>

	Leaflet.RepeatedMarkers demo

	<div id="map" class="map"></div>

	<script type="text/javascript">

		var map = new L.Map('map', {
			layers: [
				new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
					'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
				})
			],
			center: [0, 0],
			zoom: 0
		});

// 		L.control.layers({
// 			Roadmap: roadMutant,
// 			Aerial: satMutant,
// 			Terrain: terrainMutant,
// 			Hybrid: hybridMutant,
// 			Styles: styleMutant,
// 			Traffic: trafficMutant,
// 			Transit: transitMutant
// 		}, {}, {
// 			collapsed: false
// 		}).addTo(map);

		var kyiv = [50.5, 30.5],
			lnd = [51.51, -0.12],
			sf = [37.77, -122.42],
			dc = [38.91, -77.04],
			trd = [63.41, 10.41],
			mad = [40.40, -3.7];


		var marker1 = L.marker(kyiv).bindPopup('Kyiv'),
			marker2 = L.marker(lnd).bindPopup('London'),
			marker3 = L.marker(dc).bindPopup('Washington D.C.'),
			marker4 = L.marker(sf).bindPopup('San Francisco'),
			marker5 = L.marker(trd).bindPopup('Trondheim'),
			marker6 = L.marker(mad).bindPopup('Madrid');

		var repeats = L.gridLayer.repeatedMarkers().addTo(map);

		repeats.addMarker(marker1);
		repeats.addMarker(marker2);
		repeats.addMarker(marker3);
		repeats.addMarker(marker4);
		repeats.addMarker(marker5);
		repeats.addMarker(marker6);

// 		var grid = L.gridLayer({
// 			attribution: 'Grid Layer',
// //      tileSize: L.point(150, 80),
// //      tileSize: tileSize
// 		});

// 		grid.createTile = function (coords) {
// 			var tile = L.DomUtil.create('div', 'tile-coords');
// 			tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
//
// 			return tile;
// 		};

// 		map.addLayer(grid);

	</script>
</body>
</html>
